<template>
	<view class="box">
		<view class="box1">房屋信息</view>
		<view class="box2">{{estate}}</view>
		<view class="box1">房屋信息</view>
		<view class="box3">
			<view class="box4">姓名</view>
			<input placeholder-style="color:#C3C3C5" class="placeholder-class" type="text" placeholder="请填写您的真实姓名">
		</view>
		<view class="box3">
			<view class="box4">性别</view>
			<radio-group>
				<label>
					<view>
						<radio class="raido" @click="roido1"></radio>
						<label>
							<text class="text1">男</text>
						</label>
						<radio class="raido" @click="roido2"></radio>
						<label>
							<text>女</text>
						</label>
					</view>
				</label>

			</radio-group>
		</view>
		<view class="box3">
			<view class="box4">手机号</view>
			<view class="box5">
				<u--input class="text3" placeholder-style="color:#C3C3C5" placeholder="请输入手机号码" border="none">
				</u--input>
			</view>
			<block slot="right">
				<u-count-down v-if="isShowCountDown" @finish="onFinish" :time="6 * 1000" format="ss S">
				</u-count-down>
				<view v-else class="code-btn" @click="getCode">
					获取验证码
				</view>
			</block>
		</view>
		<view class="box3">
			<view class="box4">验证码</view>
			<input placeholder-style="color:#C3C3C5" class="placeholder-class" type="text" placeholder="请输入手机验证码">
		</view>
		<view class="box6">
			<view>上传本人身份证照片</view>
			<view class="text2">请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。</view>
			<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				estate: '',
				roido: '',
				isShowCountDown: false,
			};
		},
		onLoad: function(option) {
			console.log(option)
			this.estate = option.list
		},
		methods: {
			getCode() {
				// 显示倒计时
				this.isShowCountDown = true
			},
			onFinish() {
				this.isShowCountDown = false
			},
			roido1() {
				this.roido = '男'
				console.log(this.roido)
			},
			roido2() {
				this.roido = '女'
				console.log(this.roido)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: #fafafa;
	}

	.box1 {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		margin-left: 30rpx;
		color: #979797;
		font-size: 24rpx;

	}

	.box2 {
		width: 100%;
		height: 102rpx;
		background-color: #fff;
		line-height: 102rpx;
		padding-left: 30rpx;
		color: #333333;
		font-size: 28rpx;

	}

	.box3 {
		width: 100%;
		height: 102rpx;
		background-color: #fff;
		line-height: 102rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
		border: 1px solid #fdfdfd;
		display: flex;

	}

	.box4 {
		width: 208rpx;
		height: 42rpx;
		line-height: 42rpx;
		margin-top: 30rpx;
	}

	::v-deep .placeholder-class {
		margin-top: 30rpx;
	}

	.text1 {
		margin-right: 60rpx;
	}


	.box5 {
		width: 342rpx;
		margin-top: 28rpx;
	}

	.code-btn {
		color: #5f97b4;
	}

	::v-deep .u-count-down__text {
		margin-top: 30rpx;
	}

	.box6 {
		margin-top: 30rpx;
		padding-left: 30rpx;
		padding-top: 30rpx;
		width: 100%;
		height: 100%;
		background-color: #fff;
		font-size: 28rpx
	}

	.text2 {
		color: #C3C3C5;
		font-size: 22rpx;
		margin-top: 30rpx;

	}
</style>
